<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh">
      <f-sider></f-sider>
      <a-layout>
        <f-header></f-header>
        <a-row type="flex" style="flex: auto">
          <a-row>
            <f-settingsider></f-settingsider>
          </a-row>
          <a-layout-content
            :style="{ margin: '24px 16px 0', overflow: 'initial' }"
          >
            <div :style="{ padding: '24px', background: '#fff' }">
              <a-row type="flex" justify="space-between">
                <a-col>
                  <div class="title">{{ title }}</div>
                </a-col>
              </a-row>
              <a-row
                class="mt1r"
                type="flex"
                align="middle"
                v-for="(item, index) in settingdata"
                :key="index"
              >
                <a-col :span="6">{{ item.title }}：</a-col>
                <a-col :span="6">
                  <a-input
                    v-if="index != 1"
                    v-model="item.value"
                    :placeholder="item.value"
                  />
                  <a-input-password
                    v-if="index == 1"
                    v-model="item.value"
                    :placeholder="item.value"
                  />
                </a-col>
              </a-row>
              <div class="btn">
                <a-button type="primary" :loading="iconLoading" @click="save"
                  >修改</a-button
                >
                <a-button class="ml1rem" type="primary" @click="back"
                  >返回</a-button
                >
              </div>
            </div>
            <f-footer></f-footer>
          </a-layout-content>
        </a-row>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import settingsider from "../../components/layout/SettingSider.vue";
import sider from "../../components/layout/Sider.vue";
import header from "../../components/layout/Header.vue";
import footer from "../../components/layout/Footer.vue";
export default {
  metaInfo() {
    return {
      title: this.title,
      setting_id: -1,
    };
  },
  data() {
    return {
      iconLoading: false,
      settingdata: [],
      key: this.$route.query.key,
      title: "",
    };
  },
  components: {
    "f-header": header,
    "f-sider": sider,
    "f-footer": footer,
    "f-settingsider": settingsider,
  },
  watch: {
    $route: {
      handler() {
        this.key = this.$route.query.key;
        this.setsiders();
        this.getSetting();
        //深度监听，同时也可监听到param参数变化
      },
      deep: true,
    },
  },
  mounted() {
    this.$parent.tokenverify();
    this.getSetting();
    this.setsiders();
  },
  methods: {
    //获取站点信息
    getSetting() {
      switch (this.key) {
        case "10-2":
          this.title = "微信小程序设置";
          this.setting_id = 1;
          break;
        case "10-3":
          this.title = "支付宝小程序设置";
          this.setting_id = 2;
          break;
        case "10-4":
          this.title = "百度小程序设置";
          this.setting_id = 3;
          break;
        case "10-5":
          this.title = "字节跳动小程序设置";
          this.setting_id = 4;
          break;
        case "10-6":
          this.title = "QQ小程序设置";
          this.setting_id = 5;
          break;
        case "10-7":
          this.title = "APP设置";
          this.setting_id = 6;
          break;
      }
      const url = "/Admin/Setting/getSetting";
      const paramObj = {
        setting_id: this.setting_id,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.settingdata = JSON.parse(res.data.value);
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("获取失败，请刷新重试");
        }
      });
    },
    //保存
    save() {
      this.iconLoading = true;
      var settingdata = JSON.stringify(this.settingdata);

      const url = "/Admin/Setting/updateSetting";
      const paramObj = {
        setting_id: this.setting_id,
        settingdata: settingdata,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("POST", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.iconLoading = false;
          this.$message.success("修改成功");
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("保存失败，请修改后重试");
        }
      });
    },
    //菜单选中设置
    setsiders() {
      this.$store.commit("updateselectedKeys", "10");
      this.$store.commit("updateSubmenu", this.key);
    },
    //返回上一页
    back() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.mt1r {
  margin-top: 1rem;
}
.ml1rem {
  margin-left: 1rem;
}
.btn {
  margin-top: 10px;
}
.title {
  margin: 0 0 10px;
  font-size: 20px;
}
</style>